import React from 'react'
import _ from 'underscore'
import $ from 'jquery'
import View from 'lib/View.jsx'
import cx from 'classnames'
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx'
import Card from 'lib/components/card.jsx'
import CardSpec from '../common/CardSpec.jsx'
import TraceScope from './TraceScope.es6'
import ActivityTrace from './ActivityTrace.jsx'
import format from 'lib/util/format'
export default class TraceView extends View{
  renderLoading(){
    return (
      <div className="widget-content">
      <DefaultLoadingElement />
      </div>
      )
  }
  render(){
    return (
      <div className="float-position-absolute">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            {
              this.state.trace?(
                <h4>
                {
                  this.state.trace.traceDetail.appInfo.name +
                  this.state.trace.traceDetail.appInfo.version +
                  ' | ' +
                  this.state.trace.traceDetail.appInfo.packageName
                }
                </h4>
              ):null
            }
          </div>
          {this.state.trace?(
            <ActivityTrace trace={this.state.trace}/>
          ):this.renderLoading()}
        </div>
      </div>
    )
  }
}
TraceView.defaultProps = {
  Scope:TraceScope
}
